<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/apps/css/swiper-3.4.2.min.css">

    <title>　金蚂蚁装修网</title>

    <script>!function (e, t) { function i() { var t = r.getBoundingClientRect().width; (function () { for (var e = navigator.userAgent, t = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"), i = !0, a = 0; a < t.length; a++)if (e.indexOf(t[a]) > 0) { i = !1; break } return i })() && t < 2047 && (t = t > 540 ? 540 : t); var i = t / 7.5; r.style.fontSize = i + "px", s.rem = e.rem = i } var a, n = e.document, r = n.documentElement, o = n.querySelector('meta[name="viewport"]'), d = n.querySelector('meta[name="flexible"]'), l = 0, m = 0, s = t.flexible || (t.flexible = {}); if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var p = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); p && (m = parseFloat(p[1]), l = parseInt(1 / m)) } else if (d) { var c = d.getAttribute("content"); if (c) { var u = c.match(/initial\-dpr=([\d\.]+)/), f = c.match(/maximum\-dpr=([\d\.]+)/); u && (l = parseFloat(u[1]), m = parseFloat((1 / l).toFixed(2))), f && (l = parseFloat(f[1]), m = parseFloat((1 / l).toFixed(2))) } } if (!l && !m) { e.navigator.appVersion.match(/android/gi); var v = e.navigator.appVersion.match(/iphone/gi), h = (e.navigator.appVersion.match(/ipad/gi), e.devicePixelRatio); m = 1 / (l = v ? h >= 3 && (!l || l >= 3) ? 3 : h >= 2 && (!l || l >= 2) ? 2 : 1 : 1) } if (r.setAttribute("data-dpr", l), !o) if ((o = n.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + m + ", maximum-scale=" + m + ", minimum-scale=" + m + ", user-scalable=no"), r.firstElementChild) r.firstElementChild.appendChild(o); else { var g = n.createElement("div"); g.appendChild(o), n.write(g.innerHTML) } e.addEventListener("resize", function () { clearTimeout(a), a = setTimeout(i, 300) }, !1), e.addEventListener("pageshow", function (e) { e.persisted && (clearTimeout(a), a = setTimeout(i, 300)) }, !1), "complete" === n.readyState ? n.body.style.fontSize = 14 * l + "px" : n.addEventListener("DOMContentLoaded", function (e) { n.body.style.fontSize = 14 * l + "px" }, !1), i(), s.dpr = e.dpr = l, s.refreshRem = i, s.rem2px = function (e) { var t = parseFloat(e) * this.rem; return "string" == typeof e && e.match(/rem$/) && (t += "px"), t }, s.px2rem = function (e) { var t = parseFloat(e) / this.rem; return "string" == typeof e && e.match(/px$/) && (t += "rem"), t } }(window, window.lib || (window.lib = {}))


    </script>

</head>
<body class="Anli_about">
<div id="details-main">
    <!-- 详情顶部 -->
    <header id="detail-hd">
        <a class="back-prev">
            <img src="__PUBLIC__/apps/img/pre.png">
        </a>
        <div class="img-count">
            <span class="current_count">1</span>
            <span>/</span>
            <span class="total_count">9</span>
        </div>
        <a class="nav_bar">
            <img src="__PUBLIC__/apps/img/nav.png">
        </a>
    </header>
    <!-- 顶部导航 -->
    <!-- 顶部导航 -->
    <nav class="mini-menu">
        <div class="module-con topNav">
            <ul class="mui-flex">
                <foreach name="tarr" item="v">
                    <li>
                        <a href="{:U($v['action'])}">
                            <img src="__PUBLIC__/apps/img/{$v.imagename}" >
                            <span>{$v.name}</span>
                        </a>
                    </li>
                </foreach>
            </ul>
            <ul class="mui-flex">
                <foreach name="darr" item="v">
                    <li>
                        <a href="{:U($v['action'])}">
                            <img src="__PUBLIC__/apps/img/{$v.imagename}">
                            <span>{$v.name}</span>
                        </a>
                    </li>
                </foreach>
            </ul>
        </div>
        <div class="close"></div>
    </nav>


    <!-- 图片展示 -->
    <section id="imgShow">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <foreach name="arr" item="v">
                <div class="swiper-slide" data-id="105708">
                    <div class="img-container">
                        <a href="javascript:;" title="碧源月湖新中式风格装修设计">
                            <img src="{$v.imagename}" alt="碧源月湖新中式风格装修设计" data-curpage="1"
                                 data-count="10" data-title="碧源月湖新中式风格120平米小户型装修效果图"
                                 onerror='this.src="https://front.tobosu.com/static/Wpic/images/加载中.png"'>
                        </a>
                    </div>
                </div>
                </foreach>
            </div>
        </div>
    </section>
    <!-- 隐藏上下图的ajax请求链接 -->
    <div class="ajaxUrl" data-prev="http://localhost:3001/pre" data-next="http://localhost:3001/next"></div>
    <!-- 底部标签 -->
    <footer id="detail-info">
        <div class="info-container">
            <p class="info-left">碧源月湖新中式风格120平米小户型装修效果图</p>
            <div class="info-right">
                <a href="javascript:;" title="小户型装修效果图">小户型</a>
            </div>
        </div>
    </footer>
    <!-- 免费设计 -->
    <div id="free-design">
        <a href="http://m.tobosu.com/quote?tbs_source=1025">
            <span>抢免费设计</span>
            <img src="__PUBLIC__/apps/img/jiantou.gif">
        </a>
    </div>
    <!-- 左右滑动提示 -->
    <div class="slide-tip">
        <div class="gif">
            <img src="__PUBLIC__/apps/img/huadong.gif">
        </div>
        <div class="tip">左右滑动浏览更多图片</div>
        <div class="know">我知道啦</div>
    </div>
</div>

<script src="__PUBLIC__/apps/js/jquery.js"></script>
<script src="__PUBLIC__/apps/js/swiper.js"></script>
<script src="__PUBLIC__/apps/js/jquery.cookie.js"></script>
<script src="__PUBLIC__/apps/js/m_detail.js"></script>
<script>
    // 改变底部标签
    function changeTag(attrLink) {
        if (attrLink) {
            $('.info-right a:first-child').html(attrLink[0].class_name);
            $('.info-right a:first-child').attr('href', attrLink[0].linkUrl);
        }
        if (attrLink.length >= 2) {
            $('.info-right a:last-child').html(attrLink[1].class_name);
            $('.info-right a:last-child').attr('href', attrLink[1].linkUrl);
        }

    }

</script>
<script>
    var isStart = 0; //是最前
    var mySwiper = new Swiper('.swiper-container', {
        on: {
            //切换到第一张
            reachBeginning: function () {
                var prev = $('.ajaxUrl').data('prev');
                addSlideByAjax(prev, 'prev');
            },
            // 切换到最后一张
            reachEnd: function () {
                var next = $('.ajaxUrl').data('next');
                addSlideByAjax(next, 'next');

            },
            slideChange: function () {
                var currSlide = this.slides[this.activeIndex];
                var curPage = $(currSlide).find('img').data('curpage');
                var totalPage = $(currSlide).find('img').data('count');
                var title = $(currSlide).find('img').data('title');
                var attr = $(currSlide).find('img').data('attr');
                if (curPage == totalPage) {
                    $('.img-count').css('display', 'none');
                    $('#detail-info').css('display', 'none');
                    $('#free-design').css('display', 'none');
                } else {
                    $('.current_count').html(curPage);
                    $('.total_count').html(totalPage - 1);
                    $('.img-count').css('display', 'block');
                    $('#detail-info').css('display', 'block');
                    $('#free-design').css('display', 'block');
                }
                title = title + '_金蚂蚁装修网装修效果图';
                $('title').html(title);
                $('.info-left').html(title);
                changeTag(attr);
            },
        },
        initialSlide: 0,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        direction: 'horizontal',
        loop: false,
    });

</script>

<!--动态获取数据添加slide-->
<script>
    function addSlideByAjax(ajaxUrl, type) {
        $.ajax({
            url: '__CONTROLLER__/detail',
            type: 'post',
            success: function (res) {
                var res= JSON.parse(res)
                var arr = [];
                if (res.error_code == 0) {
                    var data = res.data.data;
                    for (var i = 0; i < data.length; i++) {
                        var href = 'javascript:;';
                        if (data[i].curpage == res.data.count) {
                            href = "/free_price_page?tbs_source=1026";
                        }
                        attrLink = JSON.stringify(res.data.attrLink);
                        arr[i] = "<div class=\"swiper-slide\" >" +
                            "    <div class=\"img-container\">" +
                            "        <a href='" + href + "'>" +
                            "            <img src='" + data[i].url +
                            "' onerror='this.src=\"https://front.tobosu.com/static/Wpic/images/加载中.png\"'  alt='" +
                            res.data.pageInfo.title + "'  data-curpage='" + data[i].curpage +
                            "'  data-count='" + res.data.count + "'  data-title='" + res.data.pageInfo.title +
                            "' data-attr='" + attrLink + "'" +
                            "        </a>" +
                            "    </div>" +
                            "</div>";
                    }
                    if (type == 'prev') {
                        var arrNew = arr.reverse();
                        mySwiper.prependSlide(arrNew);
                        mySwiper.update();
                        if (!isStart) {
                            //首次加载切换到当前
                            console.log(res.data);
                            isStart = isStart + 1;
                            mySwiper.slideTo(data.length, 0, false);
                            $('.current_count').html('1');
                            $('.ajaxUrl').data('prev', res.data.prev.ajax_url);
                        } else {
                            isStart = isStart + 1;
                            $('.ajaxUrl').data('prev', res.data.prev.ajax_url);
                        }
                    } else {
                        mySwiper.appendSlide(arr);
                        mySwiper.update();
                        $('.ajaxUrl').data('next', res.data.next.ajax_url);
                    }
                }
            }
        });
    }
    //初始化
    var ajaxUrl = $('.ajaxUrl').data('prev');
    addSlideByAjax(ajaxUrl, 'prev');

</script>
</body>
</html>